<template>
  <div class="app-container summarys-goods-content">
    <FilterForm :data="filterData" @search="getList" labelWidth="86px" />

    <div class="goods-center">
      <div class="tab-left">
          <el-tabs
            tab-position="left"
            style="height: 60vh"
            @tab-click="handleClick"
             v-model="activeName"
          >
            <el-tab-pane
              v-for="(item, index) in goodsNameList"
              :key="index"
              :label="item"
              :name="String(index)"
            />
          </el-tabs>
      </div>

          <Table
            :api="$Api.sales.summarizing.goods"
            :selection="false"
            :params="params"
            height="60vh"
            ref="Table"
            :summary="true"
          >
            <el-table-column label="品名" align="center" prop="goodsName" />
            <el-table-column label="等级" align="center" prop="level" width="120" />
            <el-table-column label="厚度" align="center" prop="ply" width="120" />
            <el-table-column label="宽度" align="center" prop="width" width="120" />
            <el-table-column
              label="件数"
              align="center"
              prop="pieceCount"
              width="120"
            />
            <el-table-column
              label="方数"
              align="center"
              prop="salesCount"
              width="120"
            />
            <el-table-column label="单价" align="center" prop="price" width="120" />
            <el-table-column label="金额" align="center" prop="money" />
          </Table>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      filterData: [
        {
          label: "日期",
          type: "period_date",
          st: "beginRegisterTime",
          end: "endRegisterTime",
          scale: 2,
        },
        {
          label: "品名",
          name: "goodsName",
          type: "select",
          select: "goodsName",
        },
      ],
      activeName: '4',
      goodsNameList: [],
      params: {
        goodsName: "芬兰松",
        pageSize: 100,
      },
    };
  },
  created() {

    let { goodsNameList } = this;
    this.$store.dispatch("getEnum", "goodsName").then((res) => {
      res.forEach((t) => {
        goodsNameList.push(t.goodsName);
      });
    });
  },

  methods: {
    getList(params) {
      this.$refs.Table.getData(params);
    },
    handleClick(tab, event) {
      let { params } = this;
      let name = tab.label;
      params.goodsName = name;
      this.$nextTick( () =>{
           this.$refs.Table.getData();
      })
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.summarys-goods-content{
    .el-table{ 
      // overflow: visible; 

    }
    .goods-center{
      display: flex;
    }
    .el-tabs--left, .el-tabs--right{
      overflow: visible;
    }
}

</style>